<template>
  <view class="page-view">
  	  <view class="top-bg">
  	  	<view class="return" @click="goToBack()">
  	  		<u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
  	  	</view>		
  	  	水质检测	
  	  </view>
  <view class="posBox">
  	<view class="selectZd" @click="goToSelect()" v-if="terminalId">
  		<view>选择终端：{{terminalName}}</view>
		<u-icon name="arrow-right" color="#5E5E5E  " bold="true" size="30"></u-icon>
  	</view>
	<view class="content">
		<view class="item" @click="show=true" style="align-items: center;border-bottom:1rpx rgba(235, 235, 235, 0.3) solid;">
			<text class="text">水质取样口</text>
			<u--input v-model="samplingPort" disabledColor="#ffffff" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
		</view>
		<view class="item">
			<text class="text">备注</text><u--textarea v-model="content" height="120" count
			placeholder="请输入内容"> 
		</u--textarea>
		</view>	
		<view class="item"> <text class="text">取样照片</text> 
		<u-upload width="120" height="120" :previewFullImage="true" :fileList="tp"
			name="tp" @afterRead="afterRead" @delete="deletePic" multiple
			:maxCount="6">
		</u-upload>
		</view>
		<!-- <view class="item item2">水质指标</view>
		    <view class="item2"><text class="text">氨氮</text>
		    <u--input  color="#000000" placeholder="请输入"	v-model="formData.ammoNo"	></u--input>
		    </view>
		    <view class="item2"><text class="text">COD</text>
			<u--input color="#000000"
				placeholder="请输入"
				v-model="formData.cod"
					
			></u--input>
		  </view>
		  <view class="item2"><text class="text">PH</text>
			<u--input color="#000000"
				placeholder="请输入"
				v-model="formData.ph"
					
			></u--input>
		  </view>
		  <view class="item2"><text class="text">总磷</text>
			<u--input color="#000000"
				placeholder="请输入"
				v-model="formData.totalP"
					
			></u--input>
		  </view>
		  <view class="item2"><text class="text">总氮</text>
			<u--input color="#000000"
				placeholder="请输入"
				v-model="formData.totalN"
					
			></u--input>
		  </view>
		  <view class="item" style="margin-left: 30rpx;">文件上传<view class="uploadButton" @click="upLoadFile"><image class="upload" src="@/static/yunwei/upload.png"></image>点击上传文件</view></view>
				 <view class="" style="display: flex;justify-content: space-between;">
				 {{file.name}}
				 <view v-if="file.name" class="" @click="deleteFile()">删除</view>
				 </view> -->
		<u-picker :show="show" :columns="columns" @confirm="confirm"
		@cancel="show=false"></u-picker>
	</view>
	<view class="submitBtn">
		<u-button @click="submit" :loading="loading" class="custom-style"
			text="提交"  color="#428ffc" throttleTime="1000">
		</u-button>
	</view>
  </view>
  </view>
</template>
<script>
	import {addWaterReportCommit} from '@/api/yunwei.js';
	import {commonUploadPic,commonUploadFile} from '@/api/common.js';
  export default {
    components:{
     
    },
    data() {
      return {
		  terminalName: '请选择终端',
		  terminalId:'',
		  villageId:'',
        samplingPort:'',
		show:false,
		content:'',
		tp:[],
		columns: [
		                    ['出水口', '入水口']
		                ],
      };
    },
	onShow() {
		this.terminalName = uni.getStorageSync('terminalName')
		this.terminalId = uni.getStorageSync('terminalId')
		this.villageId = uni.getStorageSync('villageId')
		console.log(this.terminalId, 'this.terminalId');
	},
    methods:{
     goToBack(){
       wx.navigateBack({
           delta: 1
         });
     },
	 goToSelect() {
	 	uni.navigateTo({
	 		url: '/subpack_YunWei/yunWeiDaka/terminalSelect'
	 	})
	 },
	async afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = this[event.name].length
		lists.map((item) => {
			this[event.name].push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromise(lists[i].url)
			let item = this[event.name][fileListLen]
			this[event.name].splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	},
	async uploadFilePromise(url) {
		const res = await commonUploadPic(url, 1)
		console.log(res, 'uploadHttp')
		let d = JSON.parse(res.data)
		if (d.code == 200) {
			return d.result
		}
	},
	// 删除图片
	deletePic(event) {
		this.tp.splice(event.index, 1)
	},
	async submit(){
		if(!this.terminalId){
			uni.showToast({
				icon: 'error',
				title: '请先选择终端',
			});
			return;
		}
		var bool = this.tp.every((item) => {
		 	return item.status=='success'
		 })
		if(!bool) {
					 uni.showToast({
					 	title: '图片上传中'
					 })
					 return
		}
		const val=this.samplingPort=='出水口'?2:this.samplingPort=='入水口'?1:''
			  const res = await addWaterReportCommit({
				  terminalId:this.terminalId,
				  villageId:this.villageId,
			    samplingPort:val,
				remark:this.content,
			  	samplingPic: this.tp.map(item => item.url).join(','),
			  })
			  console.log(res.data);
			  if (res.data.code == 200) {
			  	uni.showToast({
			  		title: '提交成功',
					icon: 'success',
					duration: 300
			  	})
				setTimeout(() => {
			  uni.navigateTo({
			  	url: '/pages/home/home'
			  })
			  }, 500)
			  } else {
			  	uni.showToast({
			  		title: res.data.data,
			  		icon: 'none'
			  	})}
	},
	confirm(e) {
		//每次点击也只会取到一个值，所以用[0]不影响
		//将取到的值赋值给selectedValue 存储起来
			this.samplingPort = e.value[0]
			//关闭选择器
			this.show = false
		},
    }
  }
</script>

<style lang="scss">
 .page-view {
	 position: relative;
   // height: 100vh;
   // background: #f8f9fb;
   .posBox{
 	  position: absolute;
 	  top: 200rpx;
	  width: 100%;
	  font-weight: bold;
	  font-size: 28rpx;
	  color: #4A4A4A;
   }
 }
 .selectZd{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 margin: 0 32rpx;
	 padding: 0 16rpx;
	 height: 88rpx;	 
	 background: #FFFFFF;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
 }
 .content{
	 padding: 28rpx 32rpx 16rpx  20rpx;
	 margin: 16rpx 32rpx;
	 background: #FFFFFF;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
	 .item{
		 display: flex;
		 align-items: center;
		 margin-bottom: 25rpx;
		 text-align: right;
		 .text{
			 width: 23%;
			 margin-right: 16rpx;
			 
		 }
	 }
	 .item2{
		 display: flex;
		 margin-left: 32rpx;
		 margin-bottom: 25rpx;
		 align-items: center;
		 border-bottom:1rpx rgba(235, 235, 235, 0.3) solid;
		 .text{
		 			 width: 18% !important;
		 			 margin-right: 16rpx;
		 			 text-align: right;
		 }
	 }
 }
 .submitBtn{
	 margin: 48rpx 88rpx;
 }
 .top-bg{
 	width: 100%;
 	height: 330rpx;
 	background: #2769F7;
 	border-radius: 0rpx 0rpx 140rpx 140rpx;
 	padding-top: 104rpx;
 	text-align: center;
 	font-weight: 600;
 	font-size: 40rpx;
 	color: #FFFFFF;
 	letter-spacing: 4rpx;
 	position: relative;
 	.return{
 		position: absolute;
 		left: 32rpx;
 		margin-top: 8rpx;
 	}
 }    
 .uploadButton{
              width: 228rpx;
              height: 64rpx;
              background: #FFFFFF;
              border-radius: 6rpx;
              border: 1rpx solid #3C8AFF;
			  font-weight: 400;
              font-size: 24rpx;
              color: #3C8AFF;
              line-height: 64rpx;
              text-align: center;
			  margin-left: 42rpx;
              .upload{
                width: 27rpx;
                height: 20rpx;
                margin-right: 12rpx;
                vertical-align: middle;
              }
            }
 /deep/ .u-textarea{
 	border: 1rpx solid #efefef;
 	border-radius: 10rpx;
	text-align: left;
 }
</style>
